<template>
  <Page>
    <div class="main">
      <div class="record">
        <div class="time">
          <Tabs default-value="trends">
            <TabsList>
              <template v-for="tab in chartTabs" :key="tab.label">
                <TabsTrigger :value="tab.value"> {{ tab.label }} </TabsTrigger>
              </template>
            </TabsList>
            <template> </template>
          </Tabs>
          <ul class="date-list">
            <li
              v-for="(date, index) in timeRanges"
              :key="index"
              :class="{ active: selectedIndex === index }"
              @click="selectDate(index)"
            >
              {{ date.text }}
            </li>
          </ul>
          <div class="dateTime">
            <el-date-picker
              :clearable="false"
              v-model="dateTime"
              type="daterange"
              unlink-panels
              range-separator="-"
            />
            <!-- :shortcuts="shortcuts" -->
          </div>
        </div>

        <div class="info">
          <ul class="nav_li">
            <li class="nav_box" v-for="(item, index) in ulList" :key="index">
              <div class="nav_msg">
                <div>
                  <span title="消耗" class="text_box">{{ item.title }}</span
                  ><span class="target">
                    <el-tooltip
                      append-to="#app"
                      :content="item.tip"
                      placement="top"
                      effect="light"
                    >
                      <i
                        class="icon-info el-popover__reference"
                        aria-describedby="el-popover-4225"
                        tabindex="0"
                      ></i>
                    </el-tooltip>
                  </span>
                </div>
                <div>
                  <div class="ellipsis">
                    {{ item.num }}<i>{{ item.unit }}</i>
                  </div>
                  <span class="spanC"
                    ><span
                      style="
                        color: #969aa3;
                        margin-right: 2px;
                        font-weight: 500;
                      "
                      >较昨日</span
                    ><i class="el-icon-top"></i
                    ><i class="red">{{ item.grow }}%</i></span
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="echarts">
        <echartsTrend></echartsTrend>
      </div>
      <div>
        <vtable></vtable>
      </div>
    </div>
  </Page>
</template>

<script setup>
import { Page } from '@vben/common-ui';
import echartsTrend from './echartsTrend.vue';
import vtable from './table.vue';
// import { Tabs, TabsContent, TabsList, TabsTrigger } from 'shadcn-ui';
import { ElDatePicker, ElTooltip } from 'element-plus';
import { h, ref, onMounted, computed } from 'vue';
import list from './list.js';
import dayjs from 'dayjs';
const title = ref('');
const dateTime = ref('');
const targetElement = ref('');
const ulList = ref();
const chartTabs = [
  {
    label: '今日实时',
    value: 'trends',
  },
  {
    label: '历史',
    value: 'visits',
  },
];
// 获取从 start 到 end 天的日期范围
const getRange = (startDays, endDays) => {
  const start = dayjs().subtract(Math.abs(startDays), 'day');
  const end = dayjs().subtract(Math.abs(endDays), 'day');
  return [start.startOf('day'), end.endOf('day')];
};
const timeRanges = ref([
  {
    text: '昨天',
    value: () => getRange(-1, -1),
  },
  {
    text: '过去7天',
    value: () => getRange(-7, 0),
  },
  {
    text: '过去30天',
    value: () => getRange(-30, 0),
  },
  {
    text: '本周',
    value: () => getWeekRange('current'),
  },
  {
    text: '上周',
    value: () => getWeekRange('last'),
  },
  {
    text: '本月',
    value: () => getMonthRange('current'),
  },
  {
    text: '上月',
    value: () => getMonthRange('last'),
  },
]);
onMounted(() => {
  // 在组件挂载时设置默认值为昨天
  dateTime.value = getYesterday();
  targetElement.value = '.target';
  ulList.value = list;
});
// 计算昨天的日期
const getYesterday = () => {
  const today = dayjs();
  const day = dayjs().subtract(1, 'day');
  return [day, day];
};

// 选择的时间范围
const selectedRange = ref(timeRanges.value[0].value()); // 默认选择“昨天”
const startDate = computed(() => selectedRange.value[0]);
const endDate = computed(() => selectedRange.value[1]);

// 处理选择变化
const handleRangeChange = (rangeText) => {
  const selected = timeRanges.value.find((r) => r.text === rangeText);
  if (selected && selected.value) {
    selectedRange.value = selected.value();
  }
};

// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD');
};

// 获取本周或上周的日期范围
const getWeekRange = (type) => {
  const today = dayjs();
  const currentWeekDay = today.day(); // 0 (Sunday) to 6 (Saturday)
  const startOfWeek = today.subtract(currentWeekDay, 'day').startOf('day'); // 本周星期日

  let startDate, endDate;

  if (type === 'current') {
    startDate = startOfWeek;
    endDate = startOfWeek.add(6, 'day').endOf('day'); // 本周星期六
  } else if (type === 'last') {
    startDate = startOfWeek.subtract(7, 'day');
    endDate = startDate.add(6, 'day').endOf('day');
  }

  return [formatDate(startDate), formatDate(endDate)];
};

// 获取本月或上月的日期范围
const getMonthRange = (type) => {
  const today = dayjs();
  const year = today.year();
  const month = today.month();

  let startDate, endDate;

  if (type === 'current') {
    startDate = dayjs(new Date(year, month, 1)).startOf('day');
    endDate = dayjs(new Date(year, month + 1, 0)).endOf('day');
  } else if (type === 'last') {
    const prevMonth = month === 0 ? 11 : month - 1;
    const prevYear = month === 0 ? year - 1 : year;
    startDate = dayjs(new Date(prevYear, prevMonth, 1)).startOf('day');
    endDate = dayjs(new Date(prevYear, prevMonth + 1, 0)).endOf('day');
  }

  return [formatDate(startDate), formatDate(endDate)];
};
const shortcuts = [
  {
    text: '昨天',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      return [start, end];
    },
  },
  {
    text: '过去7天',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: '过去30天',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: '本周',
    value: () => {
      const end = new Date();
      const start = new Date();
      const day = end.getDay(); // 0 (Sunday) to 6 (Saturday)
      const diff = day === 0 ? -6 : 1 - day; // 如果是周日，本周的第一天是上周日
      start.setDate(end.getDate() + diff);
      start.setHours(0, 0, 0, 0);
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: '上周',
    value: () => {
      const end = new Date();
      const start = new Date();
      const day = end.getDay();
      const diff = day === 0 ? -13 : 1 - day - 7; // 上周的第一天
      start.setDate(end.getDate() + diff);
      start.setHours(0, 0, 0, 0);
      end.setDate(start.getDate() + 6);
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: '本月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(1);
      start.setHours(0, 0, 0, 0);
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: '上月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(end.getMonth() - 1, 1); // 上个月的第一天
      start.setHours(0, 0, 0, 0);
      end.setDate(0); // 上个月的最后一天
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
];
const selectedIndex = ref(0);

const selectDate = (index) => {
  selectedIndex.value = index;
  const selectedDate = timeRanges.value[index].value();
  dateTime.value = selectedDate;
  console.log('选中的日期:', selectedDate);
  // 你可以在这里添加更多逻辑，如 emit 事件
};
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  .record {
    border-radius: 16px;
    border: 1px solid rgba(242, 243, 245, 0.2);
    padding: 24px;
    background: url(/static/img_overview_bg@2x.b81f2b92.png) no-repeat 100% 100%;
    .time {
      display: flex;
      margin-bottom: 30px;
    }
    .dateTime {
      width: 278px;

      :deep(.el-date-editor) {
        width: 100%;
        background: #f7f8fa !important;
      }
    }
    .info {
      .nav_li {
        display: flex;
        flex-flow: wrap;
        padding-left: 8px;
      }
      .nav_box {
        width: calc(18% - 24px);
        margin: 20px 0 10px 0;
        display: flex;
        align-items: center;
        border-radius: 8px;
        .el-icon-top {
          width: 15px;
          height: 12px;

          display: inline-block;
          background: url(/static/jt.png) no-repeat;
          background-size: 100%;
          margin-top: 3px;
        }
        .icon-info {
          width: 15px;
          height: 15px;

          display: inline-block;
          background: url(/static/ts.png) no-repeat;
          background-size: 100%;
          margin-top: 3px;
        }
        .ellipsis {
          height: 25px;
          i {
            margin-left: 2px;
            font-size: 12px;
            font-style: normal;
          }
        }
        .text_box {
          line-height: 16px;
          font-size: 14px;
          color: #4e5969;
          display: flex;
          align-items: center;
          font-weight: 500;
        }
        .spanC {
          font-size: 12px;
          line-height: 16px;
          width: 100%;
        }
        .red {
          color: #f53f3f;
          font-style: normal;
        }
        .nav_msg {
          width: 100%;
          > div:first-child {
            line-height: 16px;
            font-size: 14px;
            color: #4e5969;
            display: flex;
            align-items: center;
          }
          > div {
            font-weight: 600;
            line-height: 32px;
            font-size: 20px;
            color: #14181f;
          }
          .text_box {
            max-width: calc(100% - 18px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .date-list {
    display: flex;
    align-items: center;
    margin: 0 20px;
    li {
      height: 24px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f7f8fa;
      font-weight: 500;
      color: #6c7786;
      font-size: 12px;
      border-radius: 6px;
      margin-right: 6px;
      cursor: pointer;
      &.active {
        background: #4080ff;
        color: #fff;
      }
    }
  }
}
.echarts {
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #f2f3f5;
  padding: 10px;
  margin-top: 20px;
}
</style>
